<template>
  <div class="app-container">
    <div v-show="showWay">
      <div class="block">
        <el-row :gutter="20">
          <el-col :span="4">
            <el-input v-model="listQuery.criteria.supName" size="mini" placeholder="请输入供应商名称"></el-input>
          </el-col>
          <el-col :span="4">
            <el-input v-model="listQuery.criteria.goodsName" size="mini" placeholder="请输入商品名称"></el-input>
          </el-col>

          <el-col :span="6">
            <el-button type="success" size="mini" icon="el-icon-search" @click.native="search">搜索</el-button>
            <el-button type="primary" size="mini" icon="el-icon-refresh" @click.native="reset">重置</el-button>
            <el-button type="primary" size="mini" icon="el-icon-refresh" @click.native="changeShow">切换商品查询</el-button>
          </el-col>
        </el-row>
        <br>

        <el-row>
          <el-col :span="24">
            <el-button type="success" size="mini" icon="el-icon-plus" @click.native="addSup">添加</el-button>
            <el-button type="primary" size="mini" icon="el-icon-edit" @click.native="editSup">修改</el-button>
            <el-button type="danger" size="mini" icon="el-icon-delete" @click.native="removeSup">删除</el-button>
          </el-col>
        </el-row>

      </div>
      <el-row>
        <el-col :span="24">
          <el-table :data="listSup" row-key="id" border :default-expand-all="false" v-loading="listLoading"
            @current-change="handleCurrentChange" element-loading-text="Loading" fit highlight-current-row
            style="width: 100%;">
            <el-table-column type="expand">

              <template slot-scope="props">

                <el-table :data="props.row.supGoods" border label-position="left" style="width: 100%;margin-top: 1px;"
                  inline class="demo-table-expand">
                  <el-table-column label="商品名称">
                    <template slot-scope="scope">
                      <span>{{ scope.row.name }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="商品价格">
                    <template slot-scope="scope">
                      <span>{{ scope.row.price / 100 }}元/{{ scope.row.priceUnit }}</span>
                    </template>
                  </el-table-column>

                  <el-table-column label="商品类型">
                    <template slot-scope="scope">
                      <span>{{ getTypeValueDict(scope.row.type) }}</span>
                    </template>
                  </el-table-column>


                  <el-table-column label="商品描述">
                    <template slot-scope="scope">
                      <span>{{ scope.row.remark }}</span>
                    </template>
                  </el-table-column>


                </el-table>

              </template>
            </el-table-column>
            <el-table-column label="供应商名称" prop="name">
            </el-table-column>
            <el-table-column label="供应商地址" prop="address">
            </el-table-column>
            <el-table-column label="联系人" prop="contact">
            </el-table-column>
            <el-table-column label="状态">
              <template slot-scope="scope">
                <el-switch v-model="scope.row.status == 0" @change="changeSupStatus(scope.row)"></el-switch>
              </template>
            </el-table-column>

            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="text" size="mini" icon="el-icon-view"
                  @click.native="showItemSup(scope.row)">查看详情</el-button>
                <el-button type="text" size="mini" icon="el-icon-edit"
                  @click.native="editItemSup(scope.row)">修改</el-button>
                <el-button type="text" size="mini" icon="el-icon-circle-plus-outline"
                  @click.native="addGoods(scope.row)">添加商品</el-button>
                <el-button type="text" size="mini" icon="el-icon-delete"
                  @click.native="removeItemSup(scope.row)">删除</el-button>
              </template>
            </el-table-column>

          </el-table>
        </el-col>
      </el-row>

      <el-pagination background layout="total, sizes, prev, pager, next, jumper" :page-sizes="[10, 20, 50, 100, 500]"
        :page-size="listQuery.limitSup" :total="total" :current-page.sync="listQuery.pageSup" @size-change="changeSize"
        @current-change="fetchPage" @prev-click="fetchPrev" @next-click="fetchNext">
      </el-pagination>

    </div>





    <div v-show="!showWay">
      <div class="block">
        <el-row :gutter="24">
          <el-col :span="4">
            <el-input v-model="listQuery.criteria.supName" size="mini" placeholder="请输入供应商名称"></el-input>
          </el-col>
          <el-col :span="4">
            <el-input v-model="listQuery.criteria.goodsName" size="mini" placeholder="请输入商品名称"></el-input>
          </el-col>

          <el-col :span="6">
            <el-button type="success" size="mini" icon="el-icon-search" @click.native="search">搜索</el-button>
            <el-button type="primary" size="mini" icon="el-icon-refresh" @click.native="reset">重置</el-button>
            <el-button type="primary" size="mini" icon="el-icon-refresh"
              @click.native="changeShow">切换供应商查询查询</el-button>
          </el-col>
        </el-row>
        <br>

        <el-row>
          <el-col :span="24">
            <el-button type="primary" size="mini" icon="el-icon-edit" @click.native="editGoods">修改</el-button>
            <el-button type="danger" size="mini" icon="el-icon-delete" @click.native="removeGoods">删除</el-button>
          </el-col>
        </el-row>

      </div>
      <el-row>
        <el-col :span="20">
          <el-table :data="listGoods" style="width: 100%;margin-bottom: 20px;" v-loading="listLoading" row-key="id"
            border @current-change="handleCurrentChange2" element-loading-text="Loading" fit highlight-current-row
            :default-expand-all="false">
            <el-table-column label="供应商名称">
              <template slot-scope="scope">
                <span>{{ scope.row.supplierName }}</span>
              </template>
            </el-table-column>
            <el-table-column label="配图">
              <template slot-scope="scope">
                <img :src="`${baseUrl}file/getFileByGoodsId/${scope.row.id}?${generNum()}`" alt="加载失败"  class="avatar" max-height="50px" max-width="120px">
              </template>
              
            </el-table-column>
            <el-table-column label="商品名称">
              <template slot-scope="scope">
                <el-button type="text" @click="editItemGoods(scope.row)">{{ scope.row.name }}</el-button>
              </template>
            </el-table-column>


            <el-table-column label="商品价格">
              <template slot-scope="scope">
                <span>{{ scope.row.price / 100 }}元</span>
              </template>
            </el-table-column>
            <el-table-column label="计量单位">
              <template slot-scope="scope">
                <span>{{ scope.row.priceUnit }}</span>
              </template>
            </el-table-column>
            <el-table-column label="商品类型">
              <template slot-scope="scope">
                <span>{{  getTypeValueDict(scope.row.type) }}</span>
              </template>
            </el-table-column>
            <el-table-column label="商品描述">
              <template slot-scope="scope">
                <span>{{ scope.row.remark }}</span>
              </template>
            </el-table-column>
            <el-table-column label="状态">
              <template slot-scope="scope">
                <el-switch v-model="scope.row.status == 0" @change="changeGoodsStatus(scope.row)"></el-switch>
              </template>
            </el-table-column>
            <el-table-column label="规格">
              <template slot-scope="scope">
                <el-tag :key="tag" v-for="tag in scope.row.specification" size="mini" >
            {{ tag }}
          </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="text" size="mini" icon="el-icon-edit"
                  @click.native="editItemGoods(scope.row)">修改</el-button>
                <el-button type="text" size="mini" icon="el-icon-delete"
                  @click.native="removeItemGoods(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>

      <el-pagination background layout="total, sizes, prev, pager, next, jumper" :page-sizes="[10, 20, 50, 100, 500]"
        :page-size="listQuery.limitSup" :total="total" :current-page.sync="listQuery.pageSup" @size-change="changeSize"
        @current-change="fetchPage" @prev-click="fetchPrev" @next-click="fetchNext">
      </el-pagination>
    </div>


    <el-dialog :title="formTitle" :visible.sync="formVisible" width="70%">
      <el-form ref="formSup" :model="formSup" :rules="rulesSup" label-width="120px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="供应商名称" prop="name">
              <el-input v-model="formSup.name" minlength=1></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="供应商地址" prop="address">
              <el-input v-model="formSup.address" minlength=1></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="联系人" prop="contact">
              <el-input v-model="formSup.contact" minlength=1></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="供应商电话" prop="phone">
              <el-input v-model="formSup.phone" minlength=1></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="formSup.email"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="备注" prop="remark">
              <el-input v-model="formSup.remark"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="排序" prop="num">
              <el-input type="number" v-model="formSup.num"></el-input>
            </el-form-item>
          </el-col>

        </el-row>
        <el-form-item>
          <el-button type="primary" @click="saveSup">提交</el-button>
          <el-button @click.native="formVisible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-dialog :title="formGoodsTitle" :visible.sync="formGoodsVisible">
      <el-form ref="formGoods" :model="formGoods" :rules="rulesGoods" label-width="120px">
        <el-form-item label="商品配图：" prop="pic">
          <el-upload class="avatar-uploader" ref="upload" :show-file-list="false" action :http-request="httpRequest"
            :before-upload="beforeUpload" :on-exceed="handleExceed">
            <div v-if="!formGoods.id">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </div>
          <div v-if="formGoods.id">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <img v-else :src="`${baseUrl}file/getFileByGoodsId/${formGoods.id}?${generNum()}`" alt="加载失败"  class="avatar">
          </div>
          </el-upload>
        </el-form-item>

        <el-form-item label="商品名称" prop="name">
          <el-input type="text" v-model="formGoods.name"></el-input>
        </el-form-item>

        <el-form-item label="商品类型" prop="type">
          <el-select v-model="formGoods.type" placeholder="选择商品类型">
            <el-option v-for="item in typeDict" :key="item.id" :label="item.name" :value="item.num"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="商品价格" prop="price">
          <el-input type="number" v-model="formGoods.price" placeholder="整数且精确到分"></el-input>
        </el-form-item>

        <el-form-item label="计量单位" prop="priceUnit">
          <el-input type="text" v-model="formGoods.priceUnit"></el-input>
        </el-form-item>

        <el-form-item label="商品描述" prop="remark">
          <el-input type="text" v-model="formGoods.remark"></el-input>
        </el-form-item>

        <el-form-item label="商品规格" prop="specification">
          <el-tag :key="tag" v-for="tag in formGoods.specification" closable :disable-transitions="false" @close="handleClose(tag)">
            {{ tag }}
          </el-tag>
          <el-input class="input-new-tag" v-if="inputVisible" v-model="inputValue" ref="saveTagInput" size="small"
            @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm">
          </el-input>
          <el-button v-else class="button-new-tag" size="small" @click="showInput">+ </el-button>

        </el-form-item>


        <el-form-item>
          <el-button type="primary" @click="submitImportForm">提交</el-button>
          <el-button type="info" @click="formGoodsVisible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>


    <el-dialog title="供应商详情" :visible.sync="showSupDetail" width="70%">
      <el-row span="">
        <el-col class="col" :span="12">
          <div class="title"> 供应商名称 </div>
          <div class="val">
            <template>
              {{ formSup.name }}
            </template>
          </div>
        </el-col>
        <el-col class="col" :span="12">
          <div class="title"> 供应商地址 </div>
          <div class="val">
            <template>
              {{ formSup.address }}
            </template>
          </div>
        </el-col>
        <el-col class="col" :span="12">
          <div class="title"> 联系人 </div>
          <div class="val">
            <template>
              {{ formSup.contact }}
            </template>
          </div>
        </el-col>
        <el-col class="col" :span="12">
          <div class="title"> 供应商电话 </div>
          <div class="val">
            <template>
              {{ formSup.phone }}
            </template>
          </div>
        </el-col>
        <el-col class="col" :span="12">
          <div class="title"> 邮箱 </div>
          <div class="val">
            <template>
              {{ formSup.email }}
            </template>
          </div>
        </el-col>

        <el-col class="col" :span="12">
          <div class="title"> 备注 </div>
          <div class="val">
            <template>
              {{ formSup.remark }}
            </template>
          </div>
        </el-col>

        <el-col class="col" :span="12">
          <div class="title"> 排序 </div>
          <div class="val">
            <template>
              {{ formSup.num }}
            </template>
          </div>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script src="./sup.js"></script>

<style lang="scss" scoped>
.col {
  border: 1px solid #e6e9f0;
  height: 55px;
  line-height: 55px;
  display: flex;

  div {
    padding-left: 20px;
  }

  .title {
    min-width: 150px;
    background-color: #f5f5f5;
    color: #1F2E4D;
  }

  .val {
    flex: 1;
    border-left: 1px solid #e6e9f0;
    color: #3D4966;
  }
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
</style>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/common.scss";
</style>